<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="app">
          <!-- 
            表单元素经常使用的事件:keyup、keydown、focus、blur、change等等
            向这些事件经常与表单元素一起使用
            keyup:只要键盘抬起【qwer】都会触发，需求是按下回车才打印一次
            .enter:键盘事件的修饰符,一般只是与表单元素一起使用。


            键盘相关的修饰符有很多:
            enter->回车键
            left->左键
            right->右键
            up->上键
            down->下键
            esc、a-z、数字的都可以、书写相应的键盘码数字都可以

            常用的：回车、上下左右
         -->

         你喜欢哪首歌曲啊<input type="text" v-model="game" @keyup.enter="handle">
    </div>
</body>
</html>
<script>
    const VM = new Vue({
        el:'.app',
        data:{
            game :''
        },
        methods:{
            handle(e){
                 //键盘码:回车的键盘码13
                  //事件对象:鼠标位置【offsetX|offsetY|clientX|clientY等等】、键盘码、阻止默认事件、阻止事件传播等等
                console.log('我喜欢听'+this.game)
            }
        }
    })
</script>